<template>
  <div class="livedetail">
      <header>
          <p>{{item.live_name}}直播间</p>
          <p>{{item.live_title}}</p>
          <p></p>
      </header>
      <main>
          <div class="l">
              <p>当前观看人数：{{item.live_watcher}}人</p>
              <p>当前关注人数：{{item.live_liker}}人</p>
              <p>当前点赞人数：{{item.live_like}}人</p>
              <p>当前下单人数：{{item.live_buy}}人</p>
          </div>
          <div class="m">
              <img :src="item.live_img" alt="">
              <p>
                  <button @click="tolive">返回</button>
                  <button @click="closeitem">强制关闭</button>
              </p>
          </div>
          <div class="r"></div>
      </main>
  </div>
</template>

<script>
export default {
    data(){
        return {
            id:this.$route.params.id,
            item:{}
        }
    },
    created(){
        this.getliveitem()
    },
    methods:{
        getliveitem(){
            // this.$api.livedetail({id:this.id}).then(res=>{
            //     this.item=res.data
            // })
        },
        tolive(){//关闭
            this.$router.go(-1)
        },
        closeitem(){//强制关闭
            this.$router.go(-1)
            // this.$api.editlivelist({id:this.item.id,live_status:"已结束"}).then(res=>{
            //     console.log(res.data)
            //     this.$router.push("/live")
            // })
        }
    }
}
</script>

<style lang="less" scoped>
    .livedetail{
        width: 100%;
        height: 100%;
        
    }
    header{
        width: 100%;
        height: 50px;
        background: rgb(63, 62, 62);
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;
        color: #fff;
    }
    main{
        width: 100%;
        height: 93%;
        background: rgb(39, 39, 39);
        display: flex;
        justify-content: space-between;
        .l{
            color: royalblue;
            padding-left: 150px;
            padding-top: 100px;
            p{
                line-height: 50px;
            }
        }
        .m{
            margin-left: -250px;
            margin-top: 20px;
            img{
                width: 700px;
                height: 500px;
            }
            p{
                width: 100%;
                display: flex;
                justify-content: space-around;
                margin-top: 20px;
                button{
                    width: 200px;
                    height: 50px;
                    background: none;
                    border: 1px solid tomato;
                    color: #fff;
                    font-size: 16px;
                }
                button:first-of-type{
                    background: tomato;
                }
            }
        }
    }
</style>